ahooks

What is ahooks?

ahooks is a high-quality and reliable React Hooks library that provides a comprehensive set of hooks to enhance your React development experience. It includes a wide range of hooks for state management, side effects, lifecycle, and more.

What are ahooks's main functionalities?

State Management

The useBoolean hook provides a simple way to manage boolean state with additional methods to toggle, set true, and set false.

import { useBoolean } from 'ahooks';

function App() {
  const [state, { toggle, setTrue, setFalse }] = useBoolean(false);

  return (
    <div>
      <p>State: {state.toString()}</p>
      <button onClick={toggle}>Toggle</button>
      <button onClick={setTrue}>Set True</button>
      <button onClick={setFalse}>Set False</button>
    </div>
  );
}

Side Effects

The useDebounceEffect hook allows you to debounce side effects, which is useful for scenarios like search input where you want to delay the execution of a function.

import { useDebounceEffect } from 'ahooks';

function App() {
  const [value, setValue] = useState('');

  useDebounceEffect(() => {
    console.log('Debounced value:', value);
  }, [value], { wait: 500 });

  return (
    <input value={value} onChange={(e) => setValue(e.target.value)} />
  );
}

Lifecycle

The useMount hook runs a function once when the component is mounted, similar to componentDidMount in class components.

import { useMount } from 'ahooks';

function App() {
  useMount(() => {
    console.log('Component mounted');
  });

  return <div>Check the console</div>;
}

Other packages similar to ahooks

react-use

react-use is a collection of essential React Hooks that provides a wide range of hooks for state management, lifecycle, sensors, and more. It is similar to ahooks in terms of the variety and utility of hooks offered, but it has a different set of hooks and may have different implementations for similar functionalities.

usehooks-ts

usehooks-ts is a collection of React hooks written in TypeScript. It offers a variety of hooks for state management, side effects, and more. Compared to ahooks, usehooks-ts is specifically designed for TypeScript users, providing type-safe hooks out of the box.

react-hooks-library

react-hooks-library is another collection of reusable React hooks. It focuses on providing hooks for common use cases like state management, side effects, and lifecycle methods. While it offers similar functionalities to ahooks, it may have a smaller set of hooks and different API designs.

README

A high-quality & reliable React Hooks library.

English | 简体中文

📚 Documentation

• English
• 中文

✨ Features

• Easy to learn and use
• Supports SSR
• Special treatment for functions, avoid closure problems
• Contains a large number of advanced Hooks that are refined from business scenarios
• Contains a comprehensive collection of basic Hooks
• Written in TypeScript with predictable static types

📦 Install

$ npm install --save ahooks
# or
$ yarn add ahooks
# or
$ pnpm add ahooks
# or
$ bun add ahooks

🔨 Usage

import { useRequest } from 'ahooks';

💻 Online Demo

🤝 Contributing

$ git clone [e-mail]:alibaba/hooks.git
$ cd hooks
$ pnpm run init
$ pnpm start

Open your browser and visit http://127.0.0.1:8000

We welcome all contributions, please read our CONTRIBUTING.MD first, let's build a better hooks library together.

Thanks to all the contributors:

👥 Discuss